<!-- 弹框 -->
<template>
    <div class="drag-container" v-drag>
        <el-dialog v-model="showModal" :title="props.title" :width="props.width" :before-close="handleClose">
            <slot />
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useCach } from "@/store/cach"

let pageConfig = useCach()

let props = defineProps({
    title: String,
    width: {
        type: String,
        default: () => '30%'
    },
    loading: {
        type: Boolean,
        default: () => false
    }
})

let emits = defineEmits(['submitHandle'])

let showModal = computed(() => pageConfig.showModal)

//关闭弹框 
let handleClose = () => {
    pageConfig.changeShowModal(false)
    pageConfig.changeModalStatus('')
}

//确定按钮
let submit = () => {
    emits('submitHandle')
}

defineExpose({ handleClose })
</script>

<style lang="scss" scoped></style>